import React, {Component} from "react";
import {connect} from 'react-redux';
import ProTable from '@ant-design/pro-table';
import Add from './Add'
import {Badge, Button, Modal,Popconfirm} from 'antd';

class PayControl extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: [],
            visible: false,
            type: '',
            row: {},
            parent: [],
            params: {}

        };
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                key: 'id',
                align: 'center',
                hideInSearch: true,
                width: 80,
                valueType: 'indexBorder',
            },
            {
                title: '支付类型',
                align: 'center',
                copyable: true,
                ellipsis: true,
                dataIndex: 'name',
                key: 'name',
                hideInSearch: true,
                width: 80,

            },

            {
                title: '类型参数',
                align: 'center',
                ellipsis: true,
                copyable: true,
                tip: '数值 支付类型参数 务必保证唯一性',
                hideInSearch: true,
                dataIndex: 'payKey',
                key: 'payKey',
                width: 80,
            },

            {
                title: '状态',
                align: 'center',
                ellipsis: true,
                tip: '关闭后 用户无法使用该支付方式',
                hideInSearch: true,
                width: 80,
                render: (_, record) => {
                    return (
                        <Popconfirm
                            title="确定操作？"
                            onConfirm={() => this.status(record)}
                            okText="确定"
                            cancelText="取消"
                        >
                           <a> <Badge
                                status={record.status === 1 ? 'success' : 'error'}
                                text={record.status === 1 ? '开启' : '关闭'}/></a>
                        </Popconfirm>


                      );
                }
            },

            {
                title: '修改时间',
                dataIndex: 'updTime',
                align: 'center',
                key: 'updTime',
                hideInSearch: true,
                width: 80,
            },
            {
                title: '创建时间',
                dataIndex: 'addTime',
                align: 'center',
                key: 'addTime',
                hideInSearch: true,
                width: 80,
            },

            {
                title: '操作',
                width: 80,
                hideInSearch: true,
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.upd(record)} style={{marginLeft: 2}}>编辑</a>
                        </div>
                    )
                }
            }

        ];


    }


    handleCancel = () => {
        this.setState({
            visible: false
        })
    };
    add = (row) => {
        this.setState({
            visible: true,
            type: '0',
            row: row
        })
    }
    upd = (record) => {
        this.setState({visible: true, row: record, type: '1'})
    }

    status = (record) => {
        this.props.status({id: record.id, status: record.status === 1 ? 0 : 1}).then(res => {
            this.props.list();

        })
    };

    render() {
        const {row, type} = this.state;
        const {data} = this.props;

        return (
            <div>
                <ProTable
                columns={this.columns}
                request={(params, s, f) => {
                    this.props.list(params)
                }}
                dataSource={data}
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                rowKey="id"
                search={false}
                pagination={{
                    pageSize: 20,
                }}

                dateFormatter="string"
                headerTitle="支付信息列表"
                toolBarRender={() => [
                    <Button key="create" type="primary" onClick={() => this.add()}>
                        添加
                    </Button>,

                ]}
            />
                <Modal destroyOnClose visible={this.state.visible} title={type === '0' ? '新增' : '编辑'}
                       footer={null}
                       onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                    <Add handleCancel={this.handleCancel} record={row} type={type}></Add>
                </Modal>
            </div>
        );

    }


}


const mapState = state => ({
    ...state.payControl

});

const mapDispatch = dispatch => ({
    ...dispatch.payControl
})

export default connect(mapState, mapDispatch)(PayControl);